<template>
  <div id="main" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import axios from 'axios';

export default {
  name: 'WatchOrder',
  data() {
    return {
      data: [],
      geoCoordMap: {
        '北京市北京市': [116.46, 39.92],
        '天津市天津市': [117.2, 39.13],
        '河北省石家庄市': [114.48, 38.03],
        '河北省唐山市': [118.02, 39.63],
        '河北省秦皇岛市': [119.57, 39.95],
        '山西省太原市': [112.53, 37.87],
        '山西省大同市': [113.3, 40.12],
        '山西省阳泉市': [113.57, 37.85],
        '内蒙古自治区呼和浩特市': [111.65, 40.82],
        '内蒙古自治区包头市': [110, 40.58],
        '内蒙古自治区乌海市': [106.825, 39.673],
        '辽宁省沈阳市': [123.38, 41.8],
        '辽宁省大连市': [121.62, 38.92],
        '辽宁省鞍山市': [122.85, 41.12],
        '吉林省长春市': [125.35, 43.88],
        '吉林省吉林市': [126.57, 43.87],
        '吉林省四平市': [124.370785, 43.170344],
        '黑龙江省哈尔滨市': [126.63, 45.75],
        '黑龙江省齐齐哈尔市': [123.97, 47.33],
        '黑龙江省鸡西市': [130.975966, 45.300046],
        '上海市上海市': [121.48, 31.22],
        '江苏省南京市': [118.78, 32.04],
        '江苏省无锡市': [120.29, 31.59],
        '江苏省徐州市': [117.2, 34.26],
        '浙江省杭州市': [120.19, 30.26],
        '浙江省宁波市': [121.56, 29.86],
        '浙江省温州市': [120.65, 28.01],
        '安徽省合肥市': [117.27, 31.86],
        '安徽省芜湖市': [118.38, 31.33],
        '安徽省蚌埠市': [117.363228, 32.939667],
        '福建省福州市': [119.3, 26.08],
        '福建省厦门市': [118.1, 24.46],
        '福建省莆田市': [119.007558, 25.431011],
        '江西省南昌市': [115.89, 28.68],
        '江西省景德镇市': [117.214664, 29.29256],
        '江西省萍乡市': [113.852186, 27.622946],
        '山东省济南市': [117, 36.65],
        '山东省青岛市': [120.33, 36.07],
        '山东省淄博市': [118.05, 36.78],
        '河南省郑州市': [113.65, 34.76],
        '河南省开封市': [114.35, 34.79],
        '河南省洛阳市': [112.44, 34.7],
        '湖北省武汉市': [114.31, 30.52],
        '湖北省黄石市': [115.077048, 30.220074],
        '湖北省十堰市': [110.787916, 32.646907],
        '湖南省长沙市': [113, 28.21],
        '湖南省株洲市': [113.16, 27.83],
        '湖南省湘潭市': [112.91, 27.87],
        '广东省广州市': [113.23, 23.16],
        '广东省韶关市': [113.62, 24.84],
        '广东省深圳市': [114.07, 22.62],
        '广西壮族自治区南宁市': [108.33, 22.84],
        '广西壮族自治区柳州市': [109.4, 24.33],
        '广西壮族自治区桂林市': [110.28, 25.29],
        '海南省海口市': [110.35, 20.02],
        '海南省三亚市': [109.511909, 18.252847],
        '重庆市重庆市': [106.54, 29.59],
        '四川省成都市': [104.06, 30.67],
        '四川省自贡市': [104.778442, 29.33903],
        '四川省攀枝花市': [101.718637, 26.582347],
        '贵州省贵阳市': [106.71, 26.57],
        '贵州省六盘水市': [104.846743, 26.584643],
        '贵州省遵义市': [106.9, 27.7],
        '云南省昆明市': [102.73, 25.04],
        '云南省曲靖市': [103.79, 25.51],
        '云南省玉溪市': [102.52, 24.35],
        '西藏自治区拉萨市': [91.11, 29.97],
        '西藏自治区昌都市': [97.178452, 31.136875],
        '西藏自治区山南市': [91.766529, 29.236023],
        '陕西省西安市': [108.95, 34.27],
        '陕西省铜川市': [109.11, 35.09],
        '陕西省宝鸡市': [107.15, 34.38],
        '甘肃省兰州市': [103.73, 36.03],
        '甘肃省嘉峪关市': [98.289152, 39.77313],
        '甘肃省金昌市': [102.188043, 38.520089],
        '青海省西宁市': [101.74, 36.56],
        '青海省海东市': [102.10327, 36.502916],
        '宁夏回族自治区银川市': [106.27, 38.47],
        '宁夏回族自治区石嘴山市': [106.39, 39.04],
        '宁夏回族自治区吴忠市': [106.199409, 37.986165],
        '新疆维吾尔自治区乌鲁木齐市': [87.68, 43.77],
        '新疆维吾尔自治区克拉玛依市': [84.77, 45.59],
        '新疆维吾尔自治区吐鲁番市': [89.184078, 42.947613],
        '香港特别行政区香港岛': [114.177314, 22.266416],
        '澳门特别行政区澳门半岛': [113.549090, 22.198951]
      }
    }
  },
  methods: {
    // 转换数据格式
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        const cityName = data[i].name;
        // 只处理包含"市"字的地名，并且排除包含特定字符的数据
        if (cityName.includes('市') && 
            !cityName.includes('G') && 
            !cityName.includes('S') && 
            !cityName.includes('高速')) {
          var geoCoord = this.geoCoordMap[cityName];
          if (geoCoord) {
            res.push({
              name: cityName,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
      }
      return res;
    },
    // 从后端获取数据
    async fetchData() {
      try {
        const response = await axios.get('/apio/watchOrder');
        if (response.data.code === 200) {
          // 过滤数据，只保留城市数据
          this.data = response.data.data.filter(item => 
            item.name.includes('市') && 
            !item.name.includes('G') && 
            !item.name.includes('S') && 
            !item.name.includes('高速')
          );
          this.initChart();
        }
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    initChart() {
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      
      const option = {
        backgroundColor: 'transparent',
        title: {
          text: '全国城市订单量分布',
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: '18px',
            fontWeight: 'bold',
            textShadow: '0 0 2px rgba(255,255,255,0.5)'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return `${params.name}<br/>订单量：${params.value[2]}`;
          },
          textStyle: {
            fontSize: '14px',
            fontWeight: 'normal'
          }
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                'featureType': 'water',
                'elementType': 'all',
                'stylers': {
                  'color': '#044161'
                }
              },
              {
                'featureType': 'land',
                'elementType': 'all',
                'stylers': {
                  'color': '#091934'
                }
              },
              {
                'featureType': 'boundary',
                'elementType': 'geometry',
                'stylers': {
                  'color': '#064f85'
                }
              },
              {
                'featureType': 'highway',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              },
              {
                'featureType': 'arterial',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              },
              {
                'featureType': 'railway',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              },
              {
                'featureType': 'local',
                'elementType': 'all',
                'stylers': {
                  'visibility': 'off'
                }
              },
              {
                'featureType': 'label',
                'elementType': 'labels.text.fill',
                'stylers': {
                  'color': '#ffffff',
                  'visibility': 'on',
                  'fontSize': '14px',
                  'fontWeight': 'bold'
                }
              },
              {
                'featureType': 'label',
                'elementType': 'labels.text.stroke',
                'stylers': {
                  'color': '#000000',
                  'visibility': 'on',
                  'fontSize': '14px',
                  'fontWeight': 'bold'
                }
              }
            ]
          }
        },
        series: [
          {
            name: '订单量',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: this.convertData(this.data),
            symbolSize: function (val) {
              return val[2] * 5; // 增大点的大小
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            itemStyle: {
              color: '#ffeb3b', // 设置点的颜色
              shadowBlur: 10,
              shadowColor: '#333'
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: '#ff5722' // 鼠标悬停时的颜色
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: this.convertData(
              this.data
                .sort((a, b) => b.value - a.value)
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return val[2] * 4;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: {
              color: '#ff5722',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            zlevel: 1
          }
        ]
      };

      myChart.setOption(option);
      
      // 处理窗口缩放
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.fetchData();
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      if (myChart) {
        myChart.resize();
      }
    });
  }
}
</script>

<style scoped>
#main {
  width: 100%;
  height: 600px;
}
</style>